<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
       *{
           margin: 0;
           padding: 0;
       }
       .out{
           width: 251px;
           border: 1px red solid;
           margin: 100px auto;
       }
       .menu{
           width: 100%;
           height: 50px;
           background-color: skyblue;
           text-align: center;
           line-height: 50px;
           color: #fff;
       }

       .menu_1{
           width: 100%;
           height: 200px;
       }
       a{
           text-decoration: none;
           display: block;
           width: 100%;
           height: 40px;
           text-align: center;
       }
       
   </style>
</head>
<body>
     <div class='out'>
        <div class='menu'>菜单1</div>
        <div class="menu_1">
            <a href="">子菜单1</a>
            <a href="">子菜单2</a>
            <a href="">子菜单3</a>
        </div>
        <div class='menu'>菜单2</div>
        <div>
            <a href="">子菜单1</a>
            <a href="">子菜单2</a>
            <a href="">子菜单3</a>
        </div>
    </div>
</body>
</html>
<script src='./lib/jquery.min.js'></script>
<script>
   
   $(()=>{
      $(".menu").click(function(){
         //alert( $(this).html())
        //let i = $(this).next().css("display");
        /*  if(i=='block'){
            $(this).next().css({"display":"none"});
         }else{
            $(this).next().css({"display":"block"});

         } */
         $(this).next().slideToggle(500);
      })
   });


</script>